<template>
  <div class="elt">
    <div class="tubiao">
      <ul>
        <li>
          <router-link
            :to="{ path: '/business/commodity', query: { page: 'sp', id: id } }"
          >
            <span class="iconfont">&#xe9ce;</span>
            <p>点单</p></router-link
          >
        </li>
      </ul>
    </div>
    <div class="xinxi">
      <ul>
        <li>
          <span class="iconfont">&#xe9ce;</span> 配送服务：由
          {{ xinxi.psfw }} 提供配送服务
        </li>
        <li>
          <span class="iconfont">&#xe7c9;</span> 电话：
          {{ xinxi.sjdh }}
        </li>
        <li>
          <span class="iconfont">&#xe601;</span> 地址：
          {{ xinxi.dizhi }}
          <a :href="ditu">></a>
        </li>
        <li>
          <span class="iconfont">&#xe624;</span> 营业时间：
          {{ xinxi.yysj }}
        </li>
      </ul>
    </div>
    <a href="http://www.12388.gov.cn/cfda/">举报商家</a>
  </div>
</template>
<style lang="scss" scoped>
.elt {
  .tubiao {
    margin-top: 10px;
    background-color: rgb(255, 255, 255);
    h3 {
      margin: 0;
      font-size: 15px;
      padding: 20px;
      padding-bottom: 0;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      margin: 0;
      li {
        width: 23%;
        box-sizing: border-box;
        margin-left: 2%;
        padding-top: 10px;
        text-align: center;
        margin-bottom: 10px;
        a {
          display: block;
          span {
            font-size: 25px;
          }
          p {
            font-size: 14px;
            margin: 0;
          }
        }
      }
    }
  }
  .xinxi {
    margin-top: 10px;
    background-color: white;
    ul {
      margin: 0;
      padding: 0;
      li {
        padding: 10px;
        font-size: 16px;
        position: relative;
        border-bottom: 1px solid #ccc;
        span {
          padding: 10px;
          font-size: 25px;
        }
        a {
          display: block;
          width: 50px;
          height: 45px;
          font-size: 20px;
          position: absolute;
          text-align: center;
          line-height: 45px;
          right: 10px;
          top: 0px;
        }
      }
    }
  }
  > a {
    margin: 20px 0;
    display: block;
    text-align: center;
    background-color: white;
    padding: 10px 0;
    font-size: 18px;
    height: 30px;
    color: red;
  }
}
</style>
<script>
export default {
  name: "business",
  data() {
    return {
      id: 0,
      xinxi: {},
      ditu: "",
    };
  },
  methods: {},
  mounted() {
    this.id = this.$route.query.id;
    let _this = this;
    let pro = this.$http({
      method: "get",
      url: "/xinxi.json",
      data: {},
    });
    pro.then(function (res) {
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].id == _this.id) {
          _this.xinxi = res.data[i];
          _this.ditu = _this.xinxi.ditu + '&name="' + _this.xinxi.name + '"';
        }
      }
    });
  },
};
</script>